<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" errorPage="error.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="DEMO OA">
<link type="text/css" rel="stylesheet" href="./css/style.css" />
<script type="text/javascript"  src="./js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	/* 刷新验证码 
	加个随机数字刷新缓存
	*/
	function loadimage(){
		document.getElementById("randImage").src = "./jsp/image.jsp?"+Math.random();
	}
	
	/* 过滤用户名、密码、验证码为空的情况 */
	function checkForm(){
		 var userName=$("#username").val();
		 var password=$("#password").val();
		 var imageCode=$("#imageCode").val();
		 if(userName==""){
			 $("#error").html("用户名不能为空！");
			 return false;
		 }
		 if(password==""){
			 $("#error").html("密码不能为空！");
			 return false;
		 }
		 if(imageCode==""){
			 $("#error").html("验证码不能为空！");
			 return false;
		 }
		 return true;
	}
</script>

</head>
<body style="margin-top:30">
<center>
	<!-- 加载表格的背景图片  表格的大小为背景图片的大小800*613是1行1列  align：定义了图像相对于周围元素的水平和垂直对齐方式-->
	<table width="800"  height="613" border="0"  align="center"  background="pic/login.gif" >
		<!-- valign 属性规定单元格中内容的垂直排列方式。 -->
		<tr valign="middle">
			<td>
				<!-- 提交表单到指定的action -->
				<s:form action="user_login.action" method="post"  theme="simple"  onsubmit="return checkForm()">
				 	 <table width="502"  height="282"  border="0"  align="center" >
				 	 	 <tr>
				      		<td valign="middle">&nbsp;</td>
				      		<td height="50" colspan="1" align="left" valign="middle"></td>
				    	 </tr>
				    	 <tr>
					     	 <td width="39%" height="30" align="right"  valign="middle" >用户名</td>
						     <td width="61%" height="30" align="left" valign="middle">
							 	 <input type="text" name="username"  style="border:1 solid;height:20 " id="username">
							 </td>
					     </tr>
						 <tr>
							<td width="39%" height="30" align="right" valign="middle" > 密码</td>
							<td width="61%" height="30" align="left" valign="middle">
								  <input name="password" type="password"  style="border:1 solid;height:20 " id="password">
							</td>
						</tr>
	       				<tr>
							<td width="39%" height="30" align="right" valign="middle" class="field"> 验证码</td>
							<td width="61%" height="30" align="left" valign="middle" >
								  <input  class="text" style="width: 60px;margin-right: 10px;height:20 ;"
							type=text  value="${imageCode }"  name="imageCode" id="imageCode">
							<img onclick="javascript:loadimage();" title="换一张试试"  name="randImage"	
							id="randImage" src="./jsp/image.jsp"  width="60" height="20" border="1">	
							</td>
						</tr>
					   <tr align="center">
					        <td width="39%" height="30" valign="top"></td>
					        <td height="40" colspan="2" valign="top" align="left" >
					           <s:submit value="登录" style="width: 60px;height:20 ;"></s:submit>
					          <font id="error"  color="red">${error }</font>
					        </td>
						</tr>
				 	</table>
				 </s:form>
			</td>
		</tr>
	</table>
</center>
</body>
</html>
